<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCCPPStore } from '@/store'
import systemdemo from '@/components/ts/systemdemo'
import { storeToRefs } from 'pinia'

const store = useCCPPStore()
const activeTab = ref('measurement')

// 从store中获取配置
const { hpConfig, mpConfig, lpConfig, condensateConfig } = storeToRefs(store)

// 保存配置到工作表
const saveAdvancedSettings = () => {
  try {
    // 确保pro_dat工作表存在
    systemdemo.create_new_sheet('pro_dat', false)

    // 将高级配置保存到第10行第1列
    const advancedSettings = {
      hpConfig: hpConfig.value,
      mpConfig: mpConfig.value,
      lpConfig: lpConfig.value,
      condensateConfig: condensateConfig.value
    }

    systemdemo.set_cell_value(10, 1, JSON.stringify(advancedSettings), 'pro_dat')
    console.log('高级配置已保存到工作表')
  } catch (error) {
    console.error('保存高级配置时出错:', error)
  }
}

// 从工作表加载配置
const loadAdvancedSettings = () => {
  try {
    // 检查是否存在pro_dat工作表
    if (systemdemo.exist_sheet('pro_dat')) {
      // 从第10行第1列加载高级配置
      const advancedSettingsStr = systemdemo.get_cell_value(10, 1, 'pro_dat')
      if (advancedSettingsStr) {
        const advancedSettings = JSON.parse(advancedSettingsStr)

        // 恢复配置
        if (advancedSettings.hpConfig) {
          Object.assign(hpConfig.value, advancedSettings.hpConfig)
        }
        if (advancedSettings.mpConfig) {
          Object.assign(mpConfig.value, advancedSettings.mpConfig)
        }
        if (advancedSettings.lpConfig) {
          Object.assign(lpConfig.value, advancedSettings.lpConfig)
        }
        if (advancedSettings.condensateConfig) {
          Object.assign(condensateConfig.value, advancedSettings.condensateConfig)
        }
      }
    }
  } catch (error) {
    console.error('加载高级配置时出错:', error)
  }
}

// 组件初始化时加载配置
onMounted(() => {
  loadAdvancedSettings()
})
</script>

<template>
  <div class="advanced-settings-container">
    <div class="tabs">
      <button
        :class="['tab-button', { active: activeTab === 'measurement' }]"
        @click="activeTab = 'measurement'"
      >
        测点配置
      </button>
      <button
        :class="['tab-button', { active: activeTab === 'other' }]"
        @click="activeTab = 'other'"
      >
        其他配置
      </button>
    </div>

    <div class="tab-content">
      <div v-if="activeTab === 'measurement'" class="tab-pane">
        <div class="measurement-config">
          <!-- 高压给水流量测点配置 -->
          <div class="config-section">
            <h3 class="section-title">高压给水流量测点</h3>
            <div class="config-item">
              <label class="checkbox-label">
                <input
                  type="checkbox"
                  v-model="hpConfig.includesTCA"
                  class="checkbox-input"
                >
                <span>包含TCA流量</span>
              </label>
            </div>
            <div class="config-item">
              <label class="checkbox-label">
                <input
                  type="checkbox"
                  v-model="hpConfig.includesDesuperheater"
                  class="checkbox-input"
                >
                <span>包含减温水流量</span>
              </label>
            </div>
          </div>

          <!-- 中压给水流量测点配置 -->
          <div class="config-section">
            <h3 class="section-title">中压给水流量测点</h3>
            <div class="config-item">
              <label class="checkbox-label">
                <input
                  type="checkbox"
                  v-model="mpConfig.includesFGH"
                  class="checkbox-input"
                >
                <span>包含FGH流量</span>
              </label>
            </div>
            <div class="config-item">
              <label class="checkbox-label">
                <input
                  type="checkbox"
                  v-model="mpConfig.includesDesuperheater"
                  class="checkbox-input"
                >
                <span>包含减温水流量</span>
              </label>
            </div>
          </div>

          <!-- 低压给水流量测点配置 -->
          <div class="config-section">
            <h3 class="section-title">低压给水流量测点</h3>
            <div class="config-item">
              <label class="checkbox-label">
                <input
                  type="checkbox"
                  v-model="lpConfig.includesRecirculation"
                  class="checkbox-input"
                >
                <span>包含再循环流量</span>
              </label>
            </div>
          </div>

          <!-- 凝结水流量测点配置 -->
          <div class="config-section">
            <h3 class="section-title">凝结水流量测点</h3>
            <div class="config-item">
              <label class="checkbox-label">
                <input
                  type="checkbox"
                  v-model="condensateConfig.includesFGH"
                  class="checkbox-input"
                >
                <span>包含FGH流量</span>
              </label>
            </div>
          </div>

          <!-- 保存按钮 -->
          <div class="button-row">
            <button @click="saveAdvancedSettings" class="save-button">保存配置</button>
          </div>
        </div>
      </div>

      <div v-if="activeTab === 'other'" class="tab-pane">
        <div class="content-placeholder">
          <h3>其他配置</h3>
          <p>在此处添加其他配置相关内容</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.advanced-settings-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
  user-select: none;
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  border-bottom: 2px solid transparent;
  user-select: none;
}

.tab-button:hover {
  background-color: #e0e0e0;
}

.tab-button.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  font-weight: bold;
}

.tab-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.tab-pane {
  height: 100%;
}

.measurement-config {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config-section {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  background-color: #f9f9f9;
}

.section-title {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  user-select: none;
}

.config-item {
  margin-bottom: 10px;
  user-select: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
  user-select: none;
}

.checkbox-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.content-placeholder h3 {
  margin-bottom: 10px;
  color: #333;
}

.button-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.save-button {
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.save-button:hover {
  background-color: #66b1ff;
}
</style>
